﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UpdatePanelImageAnimation.ascx.cs" Inherits="controls_UpdatePanelImageAnimation" %>

<script type="text/javascript">

var ImgUrl = '<%= ImageUrl %>';
var UpdatePanelClientID = '<%= UpdatePanelClientID %>';

function GetElementOffsetY(obj)
{
    var curtop = 0;
    if(obj.offsetParent)
    {
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    }
    else if(obj.y)
    {
        curtop += obj.y;
    }
    
    return curtop;
}
  
function GetViewportOffsetY()
{
    var y = 0;
    
    if (self.pageYOffset) // all except Explorer
    {
	    y = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop)
	    // Explorer 6 Strict
    {
	    y = document.documentElement.scrollTop;
    }
    else if (document.body) // all other Explorers
    {
	    y = document.body.scrollTop;
    }
    
    return y;
}

function GetViewportHeight()
{
    var y = 0;
    
    if (self.innerHeight) // all except Explorer
    {
	    y = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight)
	    // Explorer 6 Strict Mode
    {
	    y = document.documentElement.clientHeight;
    }
    else if (document.body) // other Explorers
    {
	    y = document.getElementsByTagName('body')[0].clientHeight;
    }
    
    return y;
}
function GetViewportWidth()
{
    var y = 0;
    
    if (window.innerWidth) // all except Explorer
    {
	    y = window.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientWidth)
	    // Explorer 6 Strict Mode
    {
	    y = document.documentElement.clientWidth;
    }
    else if (document.body) // other Explorers
    {
	    y = document.getElementsByTagName('body')[0].clientWidth;
    }
    
    return y;
}

var div;
function animatePanel(panelElement)
{
    var panelHeight = panelElement.offsetHeight;
    var panelOffsetY = GetElementOffsetY(panelElement);
    var viewportHeight = GetViewportHeight();
    var viewportOffsetY = GetViewportOffsetY();    
    var viewportWidth = GetViewportWidth();
    
    var panelVisibleHeight = panelHeight + panelOffsetY - viewportOffsetY;
    var panelInvisibleHeight = viewportOffsetY - panelOffsetY;
    var marginTop = panelInvisibleHeight + panelVisibleHeight / 2;
    
    var img  = document.createElement('img');
    img.src = ImgUrl;
    img.alt = 'Loading...';	
    img.style.filter = 'alpha(opacity=100)'; 
		img.style.opacity= '1'; 
    img.style.marginTop = marginTop + 'px';
    img.style.position = 'absolute';
    img.style.zIndex = '10001'	;
    
    
    div = document.createElement('div');
    div.style.position = 'absolute';
    
    div.style.zIndex = '10000';
    div.style.display = '';
    
    if (panelVisibleHeight > viewportHeight)
    {
        panelVisibleHeight = viewportHeight;
    }
    
    div.style.marginTop = '0px';
    div.style.backgroundColor = 'white';
    
    div.style.left = findPosX(panelElement) + 'px';
    div.style.width = panelElement.offsetWidth + 'px';
    div.style.height = panelElement.offsetHeight+'px';
    div.style.filter = 'alpha(opacity=70)'; 
		div.style.opacity= '0.7'; 
   
    div.appendChild(img);
    
    panelElement.insertBefore(div, panelElement.firstChild);
}

 function findPosX(obj)
  {
		if(obj == null || obj == 'undefined')
			return 960;
  
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

function beginRequest(sender, args) {
    var updatingPanel = null;
    
    outer: for (var i in sender._updatePanelIDs)
						{
								for (var j in sender._panelsToRefreshIDs)
								{
										if (sender._updatePanelIDs[i] == sender._panelsToRefreshIDs[j])
										{            
												updatingPanel = document.getElementById(sender._updatePanelClientIDs[i]);
												break outer;
										}
								}
						}
    
    if (updatingPanel == null)
    {
        updatingPanel = document.getElementById(UpdatePanelClientID);    
    }
    
    if (updatingPanel != null)
    {
        animatePanel(updatingPanel);    
    }
}
function height() {
    if (document.all) 
        return document.body.offsetHeight;
    else if (document.layers)
        return document.body.document.height;
}

function endRequest(sender,args)
{

	if(div != null && div != 'undefined'){
		div.style.display = 'none';
	}
	
}

if($ != 'undefined'){
	$('document').ready(function(){
			var imagePreloading = new Image();
			imagePreloading.src = ImgUrl;
	            
			Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
			Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
	});
}

window.onload = function()
{
    var _added = false;
    var imagePreloading = new Image();
    imagePreloading.src = ImgUrl;
    
    if (_added == false)
    {
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

        _added = true;
    }
}
</script>

